<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link href="/static/css/default.css" rel="stylesheet" type="text/css">
<link href="/static/css/style/green.css" rel="stylesheet" type="text/css" id = 'link'>
<link rel="stylesheet" href="/static/FileUpload/css/jquery.fileupload.css" />
</head>

<body style="overflow:hidden; padding:10px;">
	<form>
    <table class="formtable" style="width:580px;">
    
    <tbody>
    
    	<tr>
        <td class="tlabel">学号</td>
        <td>
		<input type="text" class="forminput inputstyle1" id="number" value="{$info.number}">
		</td>
        </tr>
        
        <tr>
        <td class="tlabel">姓名</td>
        <td>
		<input type="text" class="forminput inputstyle1" id="truename" value="{$info.truename}">
		</td>
        </tr>
        
        <tr>
        <td class="tlabel">班级</td>
        <td>
		 <select type="text" id="classid"  class="select"  v-model="classid">
						     <option value="">
								 请选择
								</option>
                                <option v-for="item in list" :value='item.id'>
								 {{item.classname}}
								</option>
                            </select>
		</td>
		</tr>
		<tr>
			<td class="tlabel">性别</td>
			<td>
			 <select type="text" id="sex"  class="select"  v-model="sex">
								 <option value="">
									 请选择
									</option>
									<option v-for="item in list" :value='item'>
									 {{item}}
									</option>
								</select>
			</td>
			</tr>
		<tr>
			<td class="tlabel">上传照片(150*200像素)</td>
			<td>
				<div class="col-sm-10">
					<span class="btn btn-success fileinput-button">
						<i class="glyphicon glyphicon-plus"></i>
						<span>上传照片</span>

						<input id="fileupload" type="file" name="imgFile" multiple>

					</span>
					<div id="showpic">


						{if condition="$info['imgurl']!=''"}

						<img width="50px" src="/static/uploads/{$info['imgurl']}" />
						{else /}

						{/if}
					</div>

				</div>
			</td>
		</tr>

        
        
        <tr>
        <td class="tlabel">紧急联系方式</td>
        <td>
		<input type="text" class="forminput inputstyle1" id="otherphone" value="{$info.otherphone}">
		</td>
        </tr>
                
        
        
    </tbody>
    
    </table>
    
    <div class="formbtn">
    <input type="button" value="保存"  class="btnsave">
    <input type="button" value="取消"  class="btncancel">
    </div>
	<input type="hidden" id="id" value="{$info.id}" />
	<input type="hidden" id="imgurl" value="{$info.imgurl}" />
</form>


</body>
	<script type="text/javascript" src="/static/js/jquery.js"></script>
    <script type="text/javascript" src="/static/js/common.js"></script>
	<script type="text/javascript" src="/static/js/vue2.js"></script>
	<script src="/static/js/layer/layer.js"></script>
	<script src="/static/FileUpload/js/vendor/jquery.ui.widget.js"></script>
<script src="/static/FileUpload/js/jquery.iframe-transport.js"></script>
<script src="/static/FileUpload/js/jquery.fileupload.js"></script>
<script>
var classid ="{$info.classid}";
var sex ="{$info.sex}";
    var menu = new Vue({
        el: '#sex',
        data: {
			sex:sex,
            list: ["男","女"]
        },
        methods: {
            getdata: function () {
                var _self = this;//保存this的指向
            
            }

        },
        created: function () {  //初始化事件里边去调用查询方法
            this.getdata();
        }
	});
	
    var menu = new Vue({
        el: '#classid',
        data: {
			classid:classid,
            list: []
        },
        methods: {
            getdata: function () {
                var _self = this;//保存this的指向
			
                $.get('/Index/Myclass/GetMyClassList', function (data) {
                    _self.list = data;
                });
            }

        },
        created: function () {  //初始化事件里边去调用查询方法
            this.getdata();
        }
    });
	
	$(function(){

		$('#fileupload').fileupload({
            autoUpload: true,//是否自动上传
            url: "/index/Home/upload",
            dataType: 'json',
            done: function (e, data) {

                console.log(data.result);
                if (data.result == "") {
                    layer.msg("上传出错了!");
                } else {

                    $("#showpic").html("<img width='50px' src='/static/uploads/" + data.result + "' />");
                    $("#imgurl").val(data.result);


                }
            },
            progressall: function (e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $('#progress .progress-bar').css(
                    'width',
                    progress + '%'
                );
            }
        }).prop('disabled', !$.support.fileInput)
            .parent().addClass($.support.fileInput ? undefined : 'disabled');


		$(".btnsave").click(function(){
			var id = $("#id").val();
			var number = $("#number").val();
			var truename = $("#truename").val();
			var classid = $("#classid").val();
		
			var otherphone = $("#otherphone").val();
			var imgurl = $("#imgurl").val();
			var sex =$("#sex").val();

			if(number==""){
				layer.msg("请输入学号");
				return;
			}else if(truename==""){
				layer.msg("请输入姓名");
				return;
			}else if(classid==""){
				layer.msg("请选择班级");
				return;
			}
			

			$.post("/Index/Student/Add", { "id": id, "number":number, "truename": truename, "classid": classid,
			"otherphone": otherphone,"imgurl":imgurl,
		"sex":sex}, function (data) {
				if (data.status == 200) {
					var index = parent.layer.getFrameIndex(window.name);
					window.parent.iframe.contentWindow.location.reload(true);
					console.log(window.parent.iframe);
					parent.layer.close(index);
				}else{
					layer.msg(data.message);
				}
			});
		});
		$(".btncancel").click(function(){
			var index = parent.layer.getFrameIndex(window.name);
			parent.layer.close(index);
		});
	});
   

</script>
</html>
